<template>
	<view>
		<view style="display: flex;flex-direction: column;align-items: center">
			<view v-for="(item,index) in inspirationList" :key="index" class="inspiration-item" :style="{ borderTop: '4px solid '+item.color }">
				<view class="label" :style="{ color: item.color }">					
					<text class="date">2019-6-5</text>
				</view>
				<text class="word">{{item.body}}</text>
			</view>
			<image v-if="inspirationList.length == 0" src="/static/noInspiration.png" mode="aspectFit"></image>
			<view class="loading-text">{{loadingText}}</view>	
		</view>
		<view class="cu-load load-modal" v-if="loadModal">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="/static/logo.png" mode="aspectFit" style="width: 150upx;height: 150upx;"></image>
		</view>	
	</view>
</template>

<script>
	import { queryInspirations } from '../../utils/service.js'
	import { formatInspiration} from "../../utils/format";
	export default {
		data() {
			return {
				loadModal:false,
				color: "red",
				itemColor:[
				    'rgb(249, 191, 69)', 'rgb(134, 193, 102)', 'rgb(185, 136, 125)', 'rgb(241, 148, 131)', 'rgb(178, 143, 206)',
				    'rgb(134, 120, 53)', 'rgb(46, 169, 223)', 'rgb(231, 148, 96)', 'rgb(245, 150, 170)'
				  ],
				  inspirationList:[],
				  page:1,
				  size:9,
				  loadingText:"没有更多的了"
				
			}
		},
		async onLoad() {
			this.loadModal = true
			let res = await queryInspirations(this.page,this.size)		
			this.inspirationList = formatInspiration(res)
			this.loadModal = false				
		},
		methods: {

		},
		//上拉加载，需要自己在page.json文件中配置"onReachBottomDistance"
		async onReachBottom(){
			uni.showToast({title: '加载中'});
			this.page = this.page +1;
			this.loadingText="正在加载..."
			let res = await queryInspirations(this.page,this.size)
			if(res.length == 0){
				this.loadingText="没有更多的了"
			}else{
				let ins = formatInspiration(res)
				ins.forEach(b => {
					this.inspirationList.push(b)
				})				
			}
			
		}
	}
</script>

<style lang="less">
	
.inspiration-item{
	width: 90%;
	margin-top: 20upx;
	min-height: 100upx;
	background-color: hsla(0,0%,100%,.65);
	padding: 14px 16px;
	border-radius: 3px;
	text-align: justify;
	position: relative;
	.label{
		display: block;
		position: relative;
		left: -28px;
		margin-bottom: 26rpx;
		padding: 0 10px 0 20px;
		height: 26px;		
		line-height: 26px;
		border-radius: 0 3px 3px 0;
		background-color: currentColor;
		width: 240rpx;
		top: -16rpx;
		.date{
		  color: #f4f4f4;
		  font-family: cursive;
		  font-size: 19px;
		}
		&::after{
			  content: "";
			  position: absolute;
			  top: 100%;
			  left: 0;
			  width: 0;
			  height: 0;
			  background-color: transparent;
			  border-style: solid;
			  border-width: 0 12px 12px 0;
			  border-color: transparent;
			  border-right-color: currentColor;
			  -webkit-filter: brightness(120%);
			  filter: brightness(120%);
		}	
		
	}
	.word{
		letter-spacing: 2rpx;
		font-size: 26rpx;
		font-family: cursive		
	}

}
.loading-text{
	margin-top: 20upx;
	color: #979797;
	font-size: 24upx;
	}
</style>
